<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用Layui</title>
    <link rel="stylesheet" href="/Public/layui/dist/css/layui.css">
    <link rel="stylesheet" href="//res.layui.com/css/global.css?t=1504439386550" media="all">
</head>
<!--container  1170px 居中-->
<div class="layui-container" >
    <button id="button">点击tips</button>
    <span id="tips"> </span>
    <p>好心分手</p>
    <button id="id">tips</button>

    //HTML示例
    <div id="layer-photos-demo" class="layer-photos-demo">
        <img layer-pid="图片id，可以不写" layer-src="/Public/image/1.jpg" src="/Public/image/1.jpg" alt="图片名">
        <img layer-pid="图片id，可以不写" layer-src="/Public/image/2.jpg" src="/Public/image/2.jpg" alt="图片名">
        <img layer-pid="图片id，可以不写" layer-src="/Public/image/3.jpg" src="/Public/image/4.jpg" alt="图片名">
    </div>

</div>


<body>
<!-- 你的HTML代码 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/Public/layui/dist/layui.all.js"></script>
<script>
//    layer.msg('hello');
//    layer.open({
//        type: 1,
//        content: '传入任意的文本或html' //这里content是一个普通的String
//    });
//    layer.open({
//        type: 2,
//        content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
//    });
//layer.alert('有了回调', function(index){
//    //do something
//
//    layer.close(index);
//});
////确认框
//layer.confirm('is not?', function(index){
//    //do something
//    $('p').text('世界第一');
//    layer.close(index);
//});
//
////带图标的
//layer.msg('同上', {
//    icon: 1,
//    time: 2000 //2秒关闭（如果不配置，默认是3秒）
//}, function(){
//    //do something
//});
//
//$('#id').on('click', function(){
//    var that = this;
//    layer.tips('只想提示地精准些', that ,{
//        tips: 4
//    }); //在元素的事件回调体中，follow直接赋予this即可
//});
$(document).on('click', '#button', function(){
    layer.open({
        type: 4,
        content: ['风声耳语', '#tips'] //数组第二项即吸附元素选择器或者DOM
    });
});

//调用示例
layer.photos({
    photos: '#layer-photos-demo'
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
</script>
</body>
</html>